[Day10] Hold Shift to Check Multiple Checkboxes

checkbox 的連續勾選運用

需要用到的技巧與練習目標

1. mouseEvent.shiftKey / checked
2. 運用變數設置開關的運用

製作步驟與流程

1. 綁定所有的 checkbox 設定監聽
2. 判斷有 按shift和 已勾選過的 checkbox 執行 checkHandler函式
3. 建立一個 lastCheck 來記錄最後勾選的DOM元素 (要是執行此函式 則 lastCheck 則綁定 this (點擊的該元素))
4. 獲取 點擊元素(this) 及 最後的點及元素 (lastCheck)後，在建立一個 isBetween 的變數為 false 可以判斷是否為兩個元素中間的checkbox
5. 運用 forEach 的方式來疊代 如果是開始 就把 isBetween 的變數更改為 true 若遇到 lastCheck 則將 isBetween 的變數更改為false ( 運用 isBetween 變數來設一個開關)
6. 如果 isBetween 變數為 true 則將 checkbox 的 checked 改為true

參考文章來源:
https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/shiftKey
https://www.w3schools.com/jsref/prop_checkbox_checked.asp

https://pjchender.dev/js30/js30-day10/